<template>
  <div class="wrapper">
    <swiper ref="mySwiper" :options="swiperOption">
    <swiper-slide v-for ="item of headerImg" :key="item.id">
      <img :src="item.imgUrl" alt="">
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
  </div>
</template>

<script>
export default {
  name: 'homeSwiper',
  data(){
    return {
      headerImg:[
       {
        id:'001',
        imgUrl:'https://pic.51zxw.net//NewAn/UploadFiles/20211012/202110120936295901.jpg'
       },
       {
        id:'002',
        imgUrl:'https://pic.51zxw.net//NewAn/UploadFiles/20211018/202110180905517769.jpg'
       }
      ],
      swiperOption:{
        pagination:'.swiper-pagination',
        loop:true
      }
    }
  }
}
</script>


<style lang="css" scoped>
.wrapper >>> .swiper-pagination-bullet{
  margin-left:2px ;
  background: #fff;
}
img{
  width: 100%;
}
.wrapper{
  position: relative;
}
.swiper-pagination{
  position: absolute;
  left: 47%;
  top: 80%;
}
</style>
